<template>
    <!--对话框-->
    <el-dialog
            :title="dialog.title"
            :model-value="visible"
            custom-class="mine-dialog"
            draggable
            destroy-on-close
            @close="close"
    >
        <!--  componentName子组件名称  sonData 子组件   res 子组件返回值    -->
        <keep-alive>
            <component :is="dialog.component" ref="sonRef"></component>
        </keep-alive>
        <template #footer>
              <span class="dialog-footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="success" @click="submit">确认</el-button>
              </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
    import {defineComponent, inject, ref, toRaw} from 'vue'

    export default defineComponent({
        name: "Dialog",
        props: {
            visible: {
                type: Boolean,
                default: false
            }
        },
        setup(props, ctx) {
            //为了获取标题和方法；
            const dialog: any = inject('dialog');
            console.log(dialog);

            //绑定自组件
            const sonRef = ref();

            //确认方法
            const submit =  () => {
                //表单验证。子组件的ref 去验证
                sonRef.value.formRef.validate((valid) => {
                    if(valid){
                        const  result = toRaw(sonRef.value.elform);
                        //使用inject调用父组件的方法
                        dialog.reset(result);
                    }
                })
            }

            const close = () => {
                ctx.emit('update:visible', false);
            }

            return {
                dialog,
                submit,
                sonRef,
                close,
            }
        }
    })
</script>

<style scoped>

</style>